import Vue from "vue";

// 柱状图数据
export const barOption1 = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    grid: {
        top: "8%",
        left: "5%",
        right: "5%",
        height: "80%",
        containLabel: true,
        tooltip: {
            show: true,
        },
    },
    xAxis: {
        show: true,
        name: "数量（个）",
        type: "value",
        nameLocation: "start",
        nameTextStyle: {
            verticalAlign: "top",
            lineHeight: 30,
        },
        boundaryGap: [0, 0.1],
        axisLine: {
            show: false,
            length: "8",
            inside: "false",
        },
        axisTick: {
            show: false,
        },
    },
    yAxis: {
        type: "category",
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        data: [
            "类别1",
            "贵州边防",
            "cowork",
            "字段选择修改",
            "水文测试",
            "高清融媒体演示",
            "告警通知",
            "test",
        ],
    },
    series: [
        {
            name: "2011年",
            type: "bar",
            data: [102, 3, 3, 6, 1, 1, 1, 3],
            label: { show: true, position: "right", color: "blue" },
            itemStyle: {
                normal: {
                    color: new Vue.prototype.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        0,
                        [
                            {
                                offset: 0,
                                color: "#8D3CC4",
                            },
                            {
                                offset: 1,
                                color: "#FF00FF",
                            },
                        ]
                    ),
                },
            },
        },
    ],
};
export const barOption2 = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    grid: {
        top: "20%",
        left: "5%",
        right: "5%",
        height: "70%",
        containLabel: true,
        tooltip: {
            show: true,
        },
    },
    xAxis: {
        show: true,
        type: "category",
        axisTick: {
            show: false,
        },
        axisLabel: {
            interval: 0, //代表显示所有x轴标签显示
            rotate: 45, //代表逆时针旋转45度
        },
        axisLine: {
            lineStyle: {
                color: "#ccc",
            },
        },
        data: Array.from({ length: 16 }).fill({
            value: "cassandra",
            textStyle: {
                color: "#555",
            },
        }),
    },
    yAxis: {
        // y轴
        type: "value",
        name: "数量（个）", // 坐标轴名称
        nameTextStyle: {
            // 坐标轴名称样式
            color: "#555",
        },
        boundaryGap: [0, 0.1],
        axisTick: {
            // 坐标轴刻度线
            show: false,
        },
        axisLabel: {
            // 坐标轴刻度文字
            color: "#555",
        },
        axisLine: {
            // 坐标轴轴线
            lineStyle: {
                color: "#ccc",
            },
        },
    },
    series: [
        {
            name: "2011年",
            type: "bar",
            data: [4, 1, 5, 1, 1, 41, 11, 2, 2, 4, 1, 2, 1, 2, 2, 2, 1],
            label: { show: true, position: "top", color: "blue" },
            itemStyle: {
                normal: {
                    // 渐变色
                    color: new Vue.prototype.$echarts.graphic.LinearGradient(
                        0,
                        1,
                        0,
                        0,
                        [
                            {
                                offset: 0,
                                color: "#8D3CC4",
                            },
                            {
                                offset: 1,
                                color: "#FF00FF",
                            },
                        ]
                    ),
                },
            },
        },
    ],
};

// 饼图数据
export const PieOption1 = {
    tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    grid: {
        top: "1%",
        left: "5%",
        right: "5%",
        height: "70%",
        containLabel: true,
        tooltip: {
            show: true,
        },
    },
    legend: {
        // 图列文字解释的方向
        orient: "horizontal", // 水平
        // orient: "vertical", // 垂直
        left: 50,
        bottom: 15,
        data: [
            "Cassandra数据库",
            "Mongodb数据库",
            "本地文件系統",
            "本地媛存",
            "关系数据库",
            "Redis",
        ],
    },
    series: [
        {
            name: "个数",
            type: "pie",
            radius: ["50%", "60%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
                fontSize: 12,
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: "18",
                    fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 5, name: "Cassandra数据库" },
                { value: 2, name: "Mongodb数据库" },
                { value: 1, name: "本地文件系統" },
                { value: 3, name: "本地媛存" },
                { value: 14, name: "关系数据库" },
                { value: 2, name: "Redis" },
            ],
        },
    ],
};
export const PieOption2 = {
    tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    grid: {
        top: "1%",
        left: "5%",
        right: "5%",
        height: "70%",
        containLabel: true,
        tooltip: {
            show: true,
        },
    },
    legend: {
        orient: "horizontal",
        bottom: 25,
        data: ["在线", "离线"],
    },
    series: [
        {
            name: "个数",
            type: "pie",
            radius: "60%",
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
                fontSize: 12,
            },
            emphasis: {
                label: {
                    show: false,
                },
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 1, name: "在线" },
                { value: 2, name: "离线" },
            ],
        },
    ],
};

export const cardList = [
    {
        title: "全部",
        count: 120,
    },
    {
        title: "运行中",
        count: 0,
    },
    {
        title: "运行成功",
        count: 48,
    },
    {
        title: "运行失败",
        count: 12,
    },
    {
        title: "未部署",
        count: 20,
    },
    {
        title: "已取消",
        count: 39,
    },
    {
        title: "创建完成",
        count: 1,
    },
    {
        title: "未知",
        count: 0,
    },
];
